<!doctype html>



  


<html class="theme-next mist use-motion">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  
  
  <link href="/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/vendors/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.0.2" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="Jhin" />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.0.2" />






<meta name="description" content="ONex B2B2C 二次开发之模板级挂件创建模板级挂件创建一个模板级挂件的必备文件结构">
<meta property="og:type" content="article">
<meta property="og:title" content="ONex B2B2C 二次开发 模板级挂件">
<meta property="og:url" content="http://jhin.oschina.io/ShopEX/2016-10-21-09.ONex B2B2C 二次开发之模板级挂件.html">
<meta property="og:site_name" content="Jhin">
<meta property="og:description" content="ONex B2B2C 二次开发之模板级挂件创建模板级挂件创建一个模板级挂件的必备文件结构">
<meta property="og:updated_time" content="2016-12-22T01:45:59.491Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="ONex B2B2C 二次开发 模板级挂件">
<meta name="twitter:description" content="ONex B2B2C 二次开发之模板级挂件创建模板级挂件创建一个模板级挂件的必备文件结构">



<script type="text/javascript" id="hexo.configuration">
  var NexT = window.NexT || {};
  var CONFIG = {
    scheme: 'Mist',
    sidebar: {"position":"left","display":"post"},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: '博主'
    }
  };
</script>




  <link rel="canonical" href="http://jhin.oschina.io/ShopEX/2016-10-21-09.ONex B2B2C 二次开发之模板级挂件.html"/>


  <title> ONex B2B2C 二次开发 模板级挂件 | Jhin </title>
</head>

<body itemscope itemtype="//schema.org/WebPage" lang="zh-Hans">

  










  
  
    
  

  <div class="container one-collumn sidebar-position-left page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="//schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta custom-logo">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">Jhin</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle">Jhin(ijhin@sina.com)</p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-thinkphp">
          <a href="/categories/ThinkPHP-DOC" rel="section">
            
            ThinkPHP
          </a>
        </li>
      
        
        <li class="menu-item menu-item-mysql">
          <a href="/categories/MySQL" rel="section">
            
            MySQL
          </a>
        </li>
      
        
        <li class="menu-item menu-item-php">
          <a href="/categories/PHP" rel="section">
            
            PHP
          </a>
        </li>
      
        
        <li class="menu-item menu-item-linux">
          <a href="/categories/Linux" rel="section">
            
            Linux
          </a>
        </li>
      
        
        <li class="menu-item menu-item-nginx">
          <a href="/categories/Nginx" rel="section">
            
            Nginx
          </a>
        </li>
      
        
        <li class="menu-item menu-item-html">
          <a href="/categories/HTML" rel="section">
            
            HTML5
          </a>
        </li>
      
        
        <li class="menu-item menu-item-javascript">
          <a href="/categories/JavaScript" rel="section">
            
            JavaScript
          </a>
        </li>
      
        
        <li class="menu-item menu-item-onex">
          <a href="/categories/ONEX" rel="section">
            
            ONEX
          </a>
        </li>
      
        
        <li class="menu-item menu-item-yii">
          <a href="/categories/Yii2" rel="section">
            
            Yii2
          </a>
        </li>
      
        
        <li class="menu-item menu-item-shopex">
          <a href="/categories/ShopEX" rel="section">
            
            ShopEX
          </a>
        </li>
      

      
    </ul>
  

  
</nav>

 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="//schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                ONex B2B2C 二次开发 模板级挂件
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">发表于</span>
            <time itemprop="dateCreated" datetime="2016-10-21T14:51:55+08:00" content="2016-10-21">
              2016-10-21
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/ShopEX/" itemprop="url" rel="index">
                    <span itemprop="name">ShopEX</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <h2 id="ONex-B2B2C-二次开发之模板级挂件"><a href="#ONex-B2B2C-二次开发之模板级挂件" class="headerlink" title="ONex B2B2C 二次开发之模板级挂件"></a>ONex B2B2C 二次开发之模板级挂件</h2><h3 id="创建模板级挂件"><a href="#创建模板级挂件" class="headerlink" title="创建模板级挂件"></a>创建模板级挂件</h3><h4 id="创建一个模板级挂件的必备文件结构"><a href="#创建一个模板级挂件的必备文件结构" class="headerlink" title="创建一个模板级挂件的必备文件结构"></a>创建一个模板级挂件的必备文件结构</h4><a id="more"></a>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line">1. 配置页（_config.html）</div><div class="line">配置页是在可视化编辑时用到的配置表单。</div><div class="line"></div><div class="line">2. 配置页拦截器（theme_widget_cfg_widgetname.php）［可选］</div><div class="line">配置页拦截器用于向配置页输出系统数据，例如输出一个系统当前的商品排序方式数组。供页面<span class="tag">&lt;<span class="name">select</span>&gt;</span>填充选择。</div><div class="line">［如果配置页不需要从系统内取得数据，则此拦截器无需制作。］</div><div class="line"></div><div class="line">3. 挂件拦截器(theme_widget_widgetname.php)</div><div class="line">挂件拦截器，用于向挂件模板供应后端数据</div><div class="line"></div><div class="line">4. 挂件描述文件（widgets.php）</div><div class="line">用于描述挂件基本信息，挂件模板文件、名称对应关系。</div><div class="line"></div><div class="line">5. 挂件渲染模板（widgettpl1.html....... widgettplN.html）</div><div class="line">一个或多个挂件模板，需要在挂件描述文件中被描述，以便可视化编辑时选择挂件使用的模板。</div><div class="line"></div><div class="line">6. 可视化编辑占位模板（_preview.html）［可选］</div><div class="line">此页面用于在可视化编辑时占位，例如广告挂件由许多效果和图片资源加载，在可视化编辑时影响效率，可以用此页面来代替挂件的渲染，但是挂件拦截器同样会把数据抛向此页面，你可以只取得一些尺寸信息，用边框和文字代替挂件。［如果挂件不需要在可视化编辑模式重定义，则无需制作此页］</div></pre></td></tr></table></figure>
<h4 id="创建一个模板级挂件－long-area"><a href="#创建一个模板级挂件－long-area" class="headerlink" title="创建一个模板级挂件－long_area"></a>创建一个模板级挂件－long_area</h4><p>long_area挂件的目的是实现一个根据管理员的配置在前台显示一组文章信息。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">1.	在模板目录建立 widgets文件夹</div><div class="line">2.	在widgets文件夹内创建long_area文件夹，并进入文件夹</div><div class="line">3.	创建挂件描述文件widgets.php</div></pre></td></tr></table></figure>
<p>例如：（widgets.php）</p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;?php</span></div><div class="line"><span class="comment">/**</span></div><div class="line"> * 根据管理员配置在前台显示一组文章信息</div><div class="line"> *</div><div class="line"> * <span class="doctag">@author</span> Jhin  </div><div class="line"> */</div><div class="line"><span class="meta">&lt;?php</span></div><div class="line"><span class="comment">/*</span></div><div class="line">* 常驻地区挂件</div><div class="line">* <span class="doctag">@author</span> Jhin </div><div class="line">* <span class="doctag">@create</span>_at 20160825</div><div class="line">*/</div><div class="line">$setting[<span class="string">'author'</span>] = <span class="string">'Jhin'</span>;</div><div class="line">$setting[<span class="string">'version'</span>] = <span class="string">'v1.0'</span>;</div><div class="line">$setting[<span class="string">'name'</span>] = <span class="string">'常住地区挂件'</span>;</div><div class="line">$setting[<span class="string">'stime'</span>] = <span class="string">'2016-08'</span>;</div><div class="line">$setting[<span class="string">'catalog'</span>] = <span class="string">'Jhin'</span>;</div><div class="line">$setting[<span class="string">'description'</span>] = <span class="string">'根据ip选择所在城市'</span>;</div><div class="line">$setting[<span class="string">'tag'</span>] = <span class="string">'auto'</span>;</div><div class="line">$setting[<span class="string">'template'</span>] = <span class="keyword">array</span>(</div><div class="line">                            <span class="string">'default.html'</span>=&gt;app::get(<span class="string">'b2c'</span>)-&gt;_(<span class="string">'默认'</span>)</div><div class="line">                        );</div></pre></td></tr></table></figure>
<p>$setting 数字说明<br>|- author        作者<br>|- version        版本，默认形式 v1.0<br>|- name            挂件名称<br>|- stime        创建时间<br>|- catalog        挂件中心左侧导航栏名称<br>|- descript        关键描述<br>|- tag            挂件标签（未看到效果）<br>|- template     指定挂件板块所用的模板(前端显示的样式等,可以不设置)</p>
<h4 id="创建挂件配置页-config-html（命名规则定死-config-html"><a href="#创建挂件配置页-config-html（命名规则定死-config-html" class="headerlink" title="创建挂件配置页 _config.html（命名规则定死_config.html)"></a>创建挂件配置页 _config.html（命名规则定死_config.html)</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tableform"</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">table</span> <span class="attr">border</span>=<span class="string">"0"</span> <span class="attr">cellpadding</span>=<span class="string">"0"</span> <span class="attr">cellspacing</span>=<span class="string">"0"</span>&gt;</span></div><div class="line">		<span class="tag">&lt;<span class="name">tr</span>&gt;</span></div><div class="line">			<span class="tag">&lt;<span class="name">th</span>&gt;</span><span class="tag">&lt;<span class="name">em</span>&gt;</span><span class="tag">&lt;<span class="name">font</span> <span class="attr">color</span>=<span class="string">"red"</span>&gt;</span>*<span class="tag">&lt;/<span class="name">font</span>&gt;</span><span class="tag">&lt;/<span class="name">em</span>&gt;</span>设置名称<span class="tag">&lt;/<span class="name">th</span>&gt;</span></div><div class="line">			<span class="tag">&lt;<span class="name">td</span>&gt;</span></div><div class="line">				<span class="tag">&lt;<span class="name">&#123;input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"names"</span> <span class="attr">vtype</span>=<span class="string">"required"</span> <span class="attr">value</span>=<span class="string">$setting.names|default:</span>"<span class="attr">5</span>"&#125;&gt;</span></div><div class="line">			<span class="tag">&lt;/<span class="name">td</span>&gt;</span></div><div class="line">		<span class="tag">&lt;/<span class="name">tr</span>&gt;</span></div><div class="line">	<span class="tag">&lt;/<span class="name">table</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<p>_config.html 说明<br>|- 用途 板块中心配置页，显示效果<br>|- vtype：required    必填项<br>|- default: “5”        设置默认值为5     </p>
<h4 id="创建挂件拦截器-（theme-widget-long-area-php）（命名应于内部代码函数名保持一致）"><a href="#创建挂件拦截器-（theme-widget-long-area-php）（命名应于内部代码函数名保持一致）" class="headerlink" title="创建挂件拦截器 （theme_widget_long_area.php）（命名应于内部代码函数名保持一致）"></a>创建挂件拦截器 （theme_widget_long_area.php）（命名应于内部代码函数名保持一致）</h4><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;?php</span></div><div class="line"><span class="comment">/*</span></div><div class="line">* 常驻地区挂件拦截器</div><div class="line">* <span class="doctag">@author</span> Jhin </div><div class="line">* <span class="doctag">@create</span>_at 20160825</div><div class="line">*/</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">theme_widget_long_area</span><span class="params">(&amp;$setting)</span></span>&#123;</div><div class="line">	<span class="keyword">return</span> $setting[<span class="string">'namejhin'</span>] = jhin;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>theme_widget_long_area.php 说明<br>|- 可以为空<br>|- 可以直接返回变量在 default.html 使用</p>
<h4 id="创建挂件模板-default-html-命名规则应与widget-php挂件描述文件中-setting-‘template’-保持一致"><a href="#创建挂件模板-default-html-命名规则应与widget-php挂件描述文件中-setting-‘template’-保持一致" class="headerlink" title="创建挂件模板(default.html) (命名规则应与widget.php挂件描述文件中 $setting[‘template’] 保持一致)"></a>创建挂件模板(default.html) (命名规则应与widget.php挂件描述文件中 $setting[‘template’] 保持一致)</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"long-area-widgets"</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"long-area-widgets-header"</span>&gt;</span></div><div class="line">		<span class="tag">&lt;<span class="name">h3</span>&gt;</span><span class="tag">&lt;<span class="name">&#123;$setting.names&#125;</span>&gt;</span><span class="tag">&lt;/<span class="name">h3</span>&gt;</span></div><div class="line">		<span class="tag">&lt;<span class="name">h3</span>&gt;</span><span class="tag">&lt;<span class="name">&#123;$setting.namejhin&#125;</span>&gt;</span><span class="tag">&lt;/<span class="name">h3</span>&gt;</span></div><div class="line">	<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<p>default.html 说明<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">挂件模板同挂件配置模板页一样，都是一个代码片段，无需加入body\title\等html标签。</div><div class="line">挂件模板中的<span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span>中定义将会合并到一个css文件中被引入到<span class="tag">&lt;<span class="name">head</span>&gt;</span>头部</div><div class="line">（例如一个模板布局页面同时挂了两个mywidget）。</div><div class="line">挂件模板中的‘image/‘将会被替换为绝对路径，你可以在挂件包中创建一个images文件夹用来存放挂件相关的资源。例如<span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="xml">#<span class="tag">&lt;<span class="name">&#123;widgets_id&#125;</span>&gt;</span>_mywidge&#123; background:url(‘images/bg.png’)&#125; </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span>，在渲染到前台时，系统将自动替换images/为绝对路径。</div></pre></td></tr></table></figure></p>
<p>|- 可以调用拦截器中返回的数据<br>|- 但是不能调用widgets.php 中的设置。例如使用&lt;{$setting.name}&gt; 没有任何显示效果。</p>
<h4 id="创建可视化编辑占位模板-preview-html-命名规则定死-preview"><a href="#创建可视化编辑占位模板-preview-html-命名规则定死-preview" class="headerlink" title="创建可视化编辑占位模板 _preview.html (命名规则定死_preview)"></a>创建可视化编辑占位模板 _preview.html (命名规则定死_preview)</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"note"</span>&gt;</span></div><div class="line">我的第一个挂件</div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<p>_preview.html 说明<br>这个文件只用于模板可视化编辑时，如某些情况不方便直接将挂件呈现于可视化编辑视图。<br>则可以创建此文件在可视化编辑中代替挂件真实显示</p>
<h3 id="模板级挂件绑定到模板"><a href="#模板级挂件绑定到模板" class="headerlink" title="模板级挂件绑定到模板"></a>模板级挂件绑定到模板</h3><p>当创建好一个模板级挂件。可以在管理后台通过模板列表上面的 “维护” 按钮绑定挂件到模板。</p>
<h4 id="测试挂件"><a href="#测试挂件" class="headerlink" title="测试挂件"></a>测试挂件</h4><p>_config.html正式挂件版块配置时的一部分，在挂入到模板挂件区域时，你还可以包装挂件所使用的边框，挂件版块所使用的挂件模板等信息。</p>
<h3 id="补充"><a href="#补充" class="headerlink" title="补充"></a>补充</h3><h4 id="20160905"><a href="#20160905" class="headerlink" title="20160905"></a>20160905</h4><p>模板的变量的加载顺序</p>
<p>widgets.php -&gt; _config.html -&gt; theme_widget_xxx.php -&gt; default.html</p>
<p>首先是从 模板的 widgets.php中定义变量，这里的变量可以在_config.html中使用，而在_config.html中定义的变量可以在 theme_widgets_xxx.php中使用，最后在default.html页面上调用.</p>

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        

      
    </div>

    <footer class="post-footer">
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/ShopEX/2016-10-21-10.ONex B2B2C 二次开发之去版权.html" rel="next" title="ONex B2B2C 二次开发 去版权">
                <i class="fa fa-chevron-left"></i> ONex B2B2C 二次开发 去版权
              </a>
            
          </div>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/ShopEX/2016-10-21-02.ONex B2B2C 二次开发之程序目录结构.html" rel="prev" title="ONex B2B2C 二次开发 程序目录结构">
                ONex B2B2C 二次开发 程序目录结构 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel ">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="//schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/images/avatar.gif"
               alt="Jhin" />
          <p class="site-author-name" itemprop="name">Jhin</p>
          <p class="site-description motion-element" itemprop="description">Jhin 开发文档小结</p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">22</span>
              <span class="site-state-item-name">日志</span>
            </a>
          </div>

          
            <div class="site-state-item site-state-categories">
              
                <span class="site-state-item-count">3</span>
                <span class="site-state-item-name">分类</span>
              
            </div>
          

          

        </nav>

        

        <div class="links-of-author motion-element">
          
        </div>

        
        

        
        

      </section>

      
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">
            
              
            
            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#ONex-B2B2C-二次开发之模板级挂件"><span class="nav-number">1.</span> <span class="nav-text">ONex B2B2C 二次开发之模板级挂件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#创建模板级挂件"><span class="nav-number">1.1.</span> <span class="nav-text">创建模板级挂件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#创建一个模板级挂件的必备文件结构"><span class="nav-number">1.1.1.</span> <span class="nav-text">创建一个模板级挂件的必备文件结构</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#创建一个模板级挂件－long-area"><span class="nav-number">1.1.2.</span> <span class="nav-text">创建一个模板级挂件－long_area</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#创建挂件配置页-config-html（命名规则定死-config-html"><span class="nav-number">1.1.3.</span> <span class="nav-text">创建挂件配置页 _config.html（命名规则定死_config.html)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#创建挂件拦截器-（theme-widget-long-area-php）（命名应于内部代码函数名保持一致）"><span class="nav-number">1.1.4.</span> <span class="nav-text">创建挂件拦截器 （theme_widget_long_area.php）（命名应于内部代码函数名保持一致）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#创建挂件模板-default-html-命名规则应与widget-php挂件描述文件中-setting-‘template’-保持一致"><span class="nav-number">1.1.5.</span> <span class="nav-text">创建挂件模板(default.html) (命名规则应与widget.php挂件描述文件中 $setting[‘template’] 保持一致)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#创建可视化编辑占位模板-preview-html-命名规则定死-preview"><span class="nav-number">1.1.6.</span> <span class="nav-text">创建可视化编辑占位模板 _preview.html (命名规则定死_preview)</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#模板级挂件绑定到模板"><span class="nav-number">1.2.</span> <span class="nav-text">模板级挂件绑定到模板</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#测试挂件"><span class="nav-number">1.2.1.</span> <span class="nav-text">测试挂件</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#补充"><span class="nav-number">1.3.</span> <span class="nav-text">补充</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#20160905"><span class="nav-number">1.3.1.</span> <span class="nav-text">20160905</span></a></li></ol></li></ol></li></ol></div>
            
          </div>
        </section>
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Jhin</span>
</div>

<div class="powered-by">
  由 <a class="theme-link" href="/">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="/">
    NexT.Mist
  </a>
</div>

        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  



  
  <script type="text/javascript" src="/vendors/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/vendors/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/vendors/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/vendors/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/vendors/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/vendors/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.0.2"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.0.2"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.0.2"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.0.2"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.0.2"></script>



  



  




  
  

  

  

  

  


</body>
</html>
